<template>
  <div class="personal_index">
    <div class="personal-center-header">
      <div class="action-sheet">
        <div class="drop-icon">
          <el-dropdown  trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-more-outline"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/about">
                <el-dropdown-item>关于校集</el-dropdown-item>
              </router-link>
              <router-link to="/login">
                <el-dropdown-item>登录/注册</el-dropdown-item>
              </router-link>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="avatar border" @click="aheadUserInfo">
        <div class="avatar-img">
          <img src="@/assets/styles/image/avatar/avatar2.jpg" class="border-img border" alt="">
        </div>
        <div class="nickname">
          <p class="username">我就是狗剩先生啊</p>
          <p class="show-details">查看个人主页或编辑资料</p>
        </div>
        <div class="foward-icon">
          <span class="el-icon-arrow-right"></span>
        </div>
      </div>
    </div>
    <div class="personal-center-body">
      <div class="order-list">
        <router-link to="/order">
          <div class="order-items border" >
          <div class="item-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhangdan"></use>
            </svg>
            <p>全部订单</p>
          </div>
          <div class="item-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-qianbao"></use>
            </svg>
            <p>进行中</p>
          </div>
          <div class="item-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhangdanliushui"></use>
            </svg>
            <p>已完成</p>
          </div>
          <div class="item-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zanwudingdan"></use>
            </svg>
            <p>待点评</p>
          </div>
        </div>
        </router-link>
        <div class="details-items border">
          <div class="item-list">
            <router-link to="/cart">
              <div class="items border-bottom">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <span>购物车</span>
              </div>
            </router-link>
            <router-link to="/address">
              <div class="items border-bottom">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dingweiweizhishixiao"></use>
                </svg>
                <span>地址管理</span>
              </div>
            </router-link>
            <div class="items border-bottom"  @click="aheadUserInfo">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gerenqian"></use>
              </svg>
              <span>个人信息</span>
            </div>
            <div class="items border-bottom">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuijianfuwu"></use>
              </svg>
              <span>实名验证</span>
            </div>
            <div class="items">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouji1"></use>
              </svg>
              <span>绑定社交账号</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <commonFooter></commonFooter>
  </div>
</template>

<script>
  //引入公共底部导航栏模块
  import commonFooter from "@/pages/common/common-footer"
  export default {
    name: "Personal_index",
    data () {
      return {
        msg: '个人中心',
      }
    },
    components: {
      commonFooter
    },
    methods: {
      aheadUserInfo () {
        this.$router.push('/user_info')
      }
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
    color: #666;
  }
  /* 右上方点击按钮 */
  #dropdown-menu-1028 {
    top: 25px;
    left: 248px;
  }
  .action-sheet {
    padding-bottom: 5px;
    margin-bottom: 15px;
  }
  .action-sheet:after {
    content: '';
    clear: both;
    display: block;
  }
  .drop-icon{
    float: right;
    display: inline-block;
  }
  .drop-icon i {
    font-size: 22px;
    margin: 5px 10px;
    color: #333;
  }
  /* 用户头像 */
  .avatar {
    /*padding: 8px 15px;*/
    /*position: relative;*/
    /*display: flex;*/
    /*margin-top: .5rem;*/
    margin: 0 10px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px 15px;
    box-shadow: 0 0 10px #e5e5e5;
  }
  .avatar-img {
    flex: 1;
    background: #fff;
  }
  .avatar-img img {
    width: 100%;
    margin-top: .45rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  /* 用户名 */
  .nickname {
    padding: 5px;
    flex: 5;
    margin: 0 .8rem;
  }
  .nickname p.username {
    font-size: 16px;
    font-family: 微软雅黑;
    font-weight: bold;
    color: #333;
    margin: 0;
  }
  .nickname p.show-details {
    font-size: 14px;
    font-weight: 200;
    color: #5a5a5a;
    margin: .5rem 0 .1rem;
  }
  .el-icon-arrow-right {
    margin-top: 1rem;
    font-size: 20px;
    color: #555;
  }
    /*订单*/
  .order-list {
    padding: 0 10px;
    margin-top: 15px;
  }
  .order-items {
    display: flex;
    padding: 10px;
    box-shadow: 0 0 10px #e5e5e5;
  }
  .item-wrapper {
    flex: 1;
    text-align: center;
  }
  .item-wrapper .icon {
    font-size: 25px;
  }
  .item-wrapper p {
    margin: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    font-family: sans-serif;
  }
  /* 列表 */
  .details-items {
    margin-top: 15px;
  }
  .item-list {
    padding: 0 16px;
    box-shadow: 0 0 10px #e5e5e5;
  }
  .items {
    padding: 14px 6px;
  }
  .items .icon {
    font-size: 22px;
  }
  .items span {
    margin-left: 10px;
    color: #666;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: 400;
  }
</style>
